<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 
      v-model 数据是实现双向绑定 data数据改变=>视图改变  视图改变=>data发生改变 
      他有几个事件修饰符  .trim 清楚前后的空格 .lazy 失去焦点后才开始收集
      .number 将数据转为number类型
      条件渲染 v-if v-else v-else-if 类似if else else-if
      v-if接受以恶搞布尔值 控制元素是否渲染出来到浏览器中
      v-else-if 主要使用在多个条件的使用
      template 当渲染的模板过多 但没有统一的父级时, 用这个包起来 可以参与条件 但不会参与渲染 
      v-show 控制元素的显示和隐藏 简单的切换元素的display
      列表渲染
      v-for 遍历每一项 
      字符串 item就是每一个字符 
      对象item就是value index就是key
      数字 item 就是遍历数字对应的次数 
      v-text把html标签作为字符串直接展示和v-html可以解析html标签
      都是向标签内部插入节点内容 
      v-once 只执行渲染一次
      v-pre 不参与
      v-cloak 插值语法不会显示 会等到加载完
      修改data数据
      修改对象类型 Vue.set() 添加或者修改 Vue.delete() 删除
      数组 使用数组的方法变更方法 和非变更方法
      计算属性 computed  
     计算属性监视内部使用的其他属性的变化,一旦发生变化,计算属性就要重新计算
      侦听属性 watch 监听的对象 handles来调用函数
      监听的对象发生改变才会调用
      函数
         -->
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: "#app",
    data() {
      return {

      }

    }
  })
</script>

</html>